<template>
    <fieldset>
        <legend>App</legend>
        <div class="container">
    
            <div class="header">
            <img src="http://chst.vip:8081/todolist/static/media/logo.dc230d7c3cb96c91409eaedab952337e.svg" width="80" height="80" alt="">
            <div class="title">To-Do List</div>
            </div>
            <div class="from-field">
            <h1>~ 开始努力写代码了 ~</h1>
            </div>
        <div class="input">
            <div class="enter">
                <input type="text" placeholder="添加要做的事儿..." ref="ipt">
            </div>
            
            <button type="submit" @click="submit" class="submit-btn">
                <span>提交</span>
            </button>
        </div>
        <div class="list">
            <ul>
            <li v-for="(item,index) in list" :key="item">
                <div class="content">
                <input type="checkbox">
                <b>{{item}}</b>
                </div>
                <button @click="del(index)">X</button>
            </li>
            </ul>
        </div>
        <div class="options">
            <button>全部</button>
            <span style="color: red; margin-right: 5px; font-size: 18px;">0</span>
            <span>条事项</span>
            <button>已完成:
                <span style="color: red; margin-right: 5px; font-size: 18px;">0</span>
            </button>
            <button>未完成:
                <span style="color: red; margin-right: 5px; font-size: 18px;">0</span>
            </button>
            </div>
        </div>
    </fieldset>
    
</template>




<script setup>


import {ref,onMounted} from "vue"

// input提交
let ipt = ref()


onMounted(()=>{
  ipt.value.focus() 
})

// 提交事件
let list = ref([]);
let submit = function(){
 
  list.value.push(ipt.value.value)
  ipt.value.value=''
  ipt.value.focus() 
  // console.log(list.value)
  // 永久存储
  localStorage.setItem('txt1',JSON.stringify(list.value))
 
}

list.value = JSON.parse(localStorage.getItem('txt1'))
console.log(localStorage)
// 删除事件
let del = function(index){
  list.value.splice(index,1)
  localStorage.setItem('txt1',JSON.stringify(list.value))
}


</script>










<style scoped>
  fieldset{
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 2px;
    border-style: groove;
    border-color: rgb(192, 192, 192);
    border-image: initial;
}
legend{
    display: block;
    padding-inline-start: 2px;
    padding-inline-end: 2px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;

}
.container{
    background: #f2f2f2;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 100%;
    padding: 30px 40px 20px;
    text-align: center;
    width: 440px;
  }

    .title{
      background: #ed0e7a5e;
      border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
      color: #fff;
      font-size: 21px;
      padding: 0.25em 0.8em 0.15em;
      -webkit-transform: rotate(3deg);
      transform: rotate(3deg);
      -webkit-user-select: none;
      user-select: none;

    }
    .header{
      align-items: center;
      display: flex;
      justify-content: center;
    }
    .from-field{
      margin-top: 25px;

    }
    .from-field h1{
      color: #00bfff;
      font-size: 22px;
      margin-bottom: 18px;
    }
    
  
  .input input{
    background: transparent;
    border: 0;
    border-bottom: 3px dashed #00bfff;
    font-size: 18px;
    outline: 0;
    padding: 5px 0 3px;
    width: 100%;
}

    .submit-btn {
       
        outline: none;
        border: none;
        background-color: transparent;
        cursor: pointer;
        position: relative;
        transform: rotate(4deg);
        border-radius: 6px;
        transition: transform .25s cubic-bezier(.175, .885, .32, 1.275);
    }

    .submit-btn span {
        position: relative;
        display: block;
        font-size: 16.5px;
        padding: 0.34em 0.84em;
        border: 2px solid #494a4b;
        border-radius: inherit;
        background-color: #fff;
    }

    .submit-btn:before {
        position: absolute;
        left: 0px;
        top: 0px;
        content: "";
        width: 100%;
        height: 100%;
        transform: scaleY(1.1);
        border: 1px solid #494a4b;
        border-radius: inherit;
        transform-origin: top;
        background-color: #fe7345;
        transition: transform .25s cubic-bezier(.175, .885, .32, 1.275);
    }


    .input{
        display: flex;
        justify-content: center;

    }
    li{
      width: 100%;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .enter{
        display: inline-block;
        flex-grow: .65;
        margin-right: 15px;
    }
    .enter input{
        background: transparent;
        border: 0;
        border-bottom: 3px dashed #00bfff;
        font-size: 18px;
        outline: 0;
        padding: 5px 0 3px;
        width: 100%;
    }
    .list button{
      border: none;
      background-color:white;
      font-size: 16px;
      width: 20px;
      height: 20px;
      display:flex;
      justify-content: center;
      align-items: center;
    }
    ul{
      margin: 0;
      padding: 0;
      margin-top: 20px;
    }

    .options button{
      background: transparent;
      border: 1px double #00bfff;
      color: #666;
      cursor: pointer;
      font-size: 16px;
      font-weight: bolder;
      margin: 10px;
      outline: 0;
    }
</style>